<!DOCTYPE html>
<html>
  <head>
    <title>DataV with Three.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <!-- 引入 Vue.js -->
    <script src="https://unpkg.com/vue@2"></script>
    
    <!-- 引入 Element UI 样式和库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <!-- 引入 DataV 组件 -->
    <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>
    
    <!-- 引入 Three.js 和相关加载器 -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.3/build/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.3/examples/js/loaders/DRACOLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.3/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.3/examples/js/controls/OrbitControls.js"></script>

    <style>
      /* 设置页面和应用的基本样式 */
      html,
      body,
      #app {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      /* 设置全屏容器的背景图 */
      #dv-full-screen-container {
        background-image: url('./bg.png');
        background-size: 100% 100%;
        box-shadow: 0 0 3px blue;
      }

      /* 设置标题样式 */
      h1 {
        color: aliceblue;
        text-align: center;
      }

      /* 设置不同区域的高度 */
      .top-container {
        height: 15%;
      }

      .middle-container {
        height: calc(50vh);
      }

      .bottom-container {
        height: 25%;
      }

      /* three.js 场景容器样式 */
      #three-canvas {
        position: relative;
        width: 320px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <dv-full-screen-container>
        <el-row :gutter="20">
          <el-col :span="6">
            <dv-decoration-3 style="width: 100%; height: 30px" />
          </el-col>
          <el-col :span="12">
            <h1>Welcome to DataV</h1>
          </el-col>
          <el-col :span="6">
            <dv-decoration-3 style="width: 100%; height: 30px" />
          </el-col>
        </el-row>
        <el-row :gutter="20" class="top-container">
          <dv-digital-flop :config="digitalFlopConfig" style="width: 200px; height: 50px" />
        </el-row>
        <el-row :gutter="20" class="middle-container">
          <el-col :span="6">
            <el-col :span="24">
              <dv-border-box-1>
                <dv-active-ring-chart :config="activeRingChartConfig" style="width: 100%; height: 300px" />
              </dv-border-box-1>
            </el-col>
          </el-col>
          <el-col :span="9">
            <dv-flyline-chart :config="flylineChartConfig" style="width: 100%; height: 300px" />
          </el-col>
          <el-col :span="9">
            <dv-scroll-ranking-board :config="scrollRankingBoardConfig" style="width: 90%; height: 300px" />
          </el-col>
        </el-row>
        <el-row :gutter="20" class="bottom-container">
          <el-col :span="12">
            <div id="three-canvas"></div> <!-- Three.js 渲染的画布 -->
          </el-col>
          <el-col :span="12"> </el-col>
        </el-row>
      </dv-full-screen-container>
    </div>

    <script>
      // 配置数字翻转显示的初始值
      const config1 = {
        number: [100],
        toFixed: 2,
        content: '{nt}个'
      }

      // 配置数字翻转显示的更新值
      const config2 = {
        number: [999],
        toFixed: 2,
        content: '{nt}个'
      }

      // 创建 Vue 实例
      var app = new Vue({
        el: '#app',
        data: {
          digitalFlopConfig: config1, // 数字翻转配置
          activeRingChartConfig: {
            data: [
              { name: '周口', value: 55 },
              { name: '南阳', value: 120 },
              { name: '西峡', value: 78 },
              { name: '驻马店', value: 66 },
              { name: '新乡', value: 80 }
            ]
          },
          flylineChartConfig: {
            centerPoint: [0.48, 0.35],
            points: [
              [0.52, 0.23],
              [0.43, 0.29],
              [0.59, 0.35],
              [0.53, 0.47],
              [0.45, 0.54],
              [0.36, 0.38],
              [0.62, 0.55],
              [0.56, 0.56],
              [0.37, 0.66],
              [0.55, 0.81],
              [0.55, 0.67],
              [0.37, 0.29],
              [0.2, 0.36],
              [0.76, 0.41],
              [0.59, 0.18],
              [0.68, 0.17],
              [0.59, 0.1]
            ],
            bgImgUrl: './map.jpg' // 背景图片路径
          },
          scrollRankingBoardConfig: {
            data: [
              { name: '周口', value: 55 },
              { name: '南阳', value: 120 },
              { name: '西峡', value: 78 },
              { name: '驻马店', value: 66 },
              { name: '新乡', value: 80 },
              { name: '信阳', value: 45 },
              { name: '漯河', value: 29 }
            ]
          }
        },
        mounted() {
          // 在组件挂载完成后执行
          setTimeout(() => {
            this.digitalFlopConfig = config2 // 更新数字翻转配置
            this.initThree() // 初始化 Three.js
          }, 1000)
        },
        methods: {
          initThree() {
            const canvas = document.getElementById('three-canvas') // 获取 Three.js 画布
            if (!canvas) {
              console.error('Canvas element not found!')
              return
            }

            // 创建 Three.js 场景、相机和渲染器
            const scene = new THREE.Scene()
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
            const renderer = new THREE.WebGLRenderer({ alpha: true })
            renderer.setSize(canvas.offsetWidth, canvas.offsetHeight)
            canvas.appendChild(renderer.domElement) // 将渲染器的 DOM 元素添加到画布中

            // 添加光源
            const ambientLight = new THREE.AmbientLight(0x404040) // 环境光
            scene.add(ambientLight)

            const directionalLight = new THREE.DirectionalLight(0xffffff, 1) // 平行光
            directionalLight.position.set(5, 5, 5) // 设置光源位置
            scene.add(directionalLight)

            // 添加 OrbitControls
            const controls = new THREE.OrbitControls(camera, renderer.domElement)
            controls.enableDamping = true // 启用阻尼
            controls.dampingFactor = 0.25 // 阻尼因子
            controls.screenSpacePanning = false // 禁用平面空间平移
            controls.maxPolarAngle = Math.PI / 2 // 限制垂直角度

            // 设置 DRACO 解码器
            const dracoLoader = new THREE.DRACOLoader()
            dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/')

            // 加载 GLTF 模型
            const loader = new THREE.GLTFLoader()
            loader.setDRACOLoader(dracoLoader)
            loader.load(
              './100000_full-compressed.glb', // 替换为你的 .glb 模型路径
              function (gltf) {
                // 缩小模型
                const scale = 0.03
                gltf.scene.scale.set(scale, scale, scale)
                scene.add(gltf.scene) // 将模型添加到场景中
              },
              undefined,
              function (error) {
                console.error(error) // 处理加载错误
              }
            )

            camera.position.z = 5 // 设置相机位置

            // Raycaster 和鼠标位置
            const raycaster = new THREE.Raycaster()
            const mouse = new THREE.Vector2()

            // 监听鼠标点击事件
            window.addEventListener('click', event => {
              // 计算鼠标在 NDC 坐标系中的位置
              mouse.x = (event.clientX / window.innerWidth) * 2 - 1
              mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

              // 更新射线
              raycaster.setFromCamera(mouse, camera)

              // 计算物体与射线的交点
              const intersects = raycaster.intersectObjects(scene.children, true)

              if (intersects.length > 0) {
                const selectedMesh = intersects[0].object // 获取选中的物体
                console.log('Selected:', selectedMesh.name ? selectedMesh.name : 'No Name')
                
                // 创建高亮材质
                const highlightMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }) // 高亮为红色

                // 将高亮材质应用于选中的 Mesh
                selectedMesh.material = highlightMaterial

                // 还原材质的逻辑可以在后续实现
              }
            })

            // 动画循环
            function animate() {
              requestAnimationFrame(animate)
              controls.update() // 更新控制器
              renderer.render(scene, camera) // 渲染场景
            }

            animate() // 启动动画
          }
        }
      })
    </script>
  </body>
</html>